<template>
    <div class="public-survey-detail-wrapper">
      <div class="survey-detail-header">
        <div class="header-image">
          <img :src="detailImg">
        </div>
        <div class="header-content">
          <div class="text-align-c">
            <h2>{{detailTitle}}</h2>
            <p class="end-time" ref="countDown" v-cloak>距申请结束：<b>00</b>天<b>00</b>小时<b>00</b>分<b>00</b>秒</p>
          </div>
          <van-row class="head-content-row text-align-c">
            <van-col span="8">
              <div class="right-line">
                <p class="head-content-number">&yen;{{detailPrice}}</p>
                <p>官方报价</p>
              </div>
            </van-col>
            <van-col span="8">
              <div class="right-line">
                <p class="head-content-number">{{detailNumber}}</p>
                <p>数量</p>
              </div>
            </van-col>
            <van-col span="8">
              <p class="head-content-number">{{detailTotal}}</p>
              <p>申请人数</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- tab1-->
      <div v-if="detailStatus === null">
        <div class="survey-detail-container">
          <div class="survey-detail-tab">
            <van-tabs v-model="surveyTabActive" :color="'#333'" :line-width="lineWidth">
              <van-tab title="产品详情" v-html="goodsDetail"></van-tab>
              <van-tab title="规则&流程" v-html="rulesFlow"></van-tab>
            </van-tabs>
          </div>
        </div>
        <div class="survey-footer" v-if="showFree">
          <router-link :to="{path:'/receiver-address',query:{id:id}}">免费申请</router-link>
        </div>
      </div>
      <!-- tab2-->
      <div v-if="detailStatus !== null">
        <div class="survey-detail-container">
          <div class="survey-detail-tab">
            <van-tabs v-model="surveyTabActive" :color="'#333'" :line-width="lineWidth">
              <van-tab title="评测报告">
                <van-list
                  v-model="isCommentUploading"
                  :finished="isCommentUpfinished"
                  :finished-text=" commentList.length === 0 ? '暂无评论' : '没有更多了' "
                  @load="onCommentLoad"
                >
                  <div class="evaluation-report" v-for="(item,index) in commentList" :key="index">
                    <div class="report-head clearfix">
                      <div class="report-head-portrait fl">
                        <img :src="item.member.avatar ? item.member.avatar : '/static/images/user-portrait-default.png'">
                      </div>
                      <div class="report-head-name fl">
                        <h4>{{item.member.nickname}}</h4>
                        <p>{{item.created_at}}</p>
                      </div>
                    </div>
                    <div class="report-content">
                      <p class="report-content-detail" v-html="item.content"></p>
                      <ul class="report-content-image clearfix">
                        <li v-for="(item1,index1) in item.images" :key="index1">
                          <img :src="item1.image">
                        </li>
                      </ul>
                    </div>
                    <div class="report-content-advantages van-hairline--top clearfix">
                      <b class="fl">优点：</b>
                      <p class="fl" v-html="item.virtue"></p>
                    </div>
                    <div class="report-content-shortcomings van-hairline--top clearfix">
                      <b class="fl">缺点：</b>
                      <p class="fl" v-html="item.defect"></p>
                    </div>
                  </div>
                </van-list>
              </van-tab>
              <van-tab title="产品详情" v-html="goodsDetail"></van-tab>
              <van-tab title="规则&流程" v-html="rulesFlow"></van-tab>
              <van-tab title="成功名单">
                <van-list
                  v-model="isMemberUploading"
                  :finished="isMemberUpfinished"
                  :finished-text=" memberList.length === 0 ? '暂无数据' : '没有更多了' "
                  @load="onMemberLoad"
                >
                  <van-row class="name-list text-align-c">
                    <van-col span="6" v-for="(item,index) in memberList" :key="index">
                      <div class="user-portrait">
                        <img :src="item.avatar ? item.avatar : '/static/images/user-portrait-default.png'">
                      </div>
                      <p class="user-name">{{ item.nickname }}</p>
                    </van-col>
                  </van-row>
                </van-list>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import { Row, Col, Cell, Button,Icon,Tab, Tabs, List} from 'vant'
    import ajax from '../../module/ajax/public'

    export default {
        name: "PublicSurveyDetail",
        components: {
          [Row.name]: Row,
          [Col.name]: Col,
          [Cell.name]: Cell,
          [Button.name]: Button,
          [Icon.name]: Icon,
          [Tab.name]: Tab,
          [Tabs.name]: Tabs,
          [List.name]: List,
        },
        mounted(){
            this.id = this.$route.query.id
            this.getDetailData()
            this.getMembers()
            this.getCommentData()
        },
        data(){
            return{
              id:1,
              surveyTabActive:0,
              lineWidth:30,
              baseUrl:{
                'CDNimgUrl':this.GLOBAL.CDNimgUrl,
              },
              detailImg:'',
              detailTitle:'',
              detailPrice:0,
              detailNumber:0,
              detailTotal:0,
              detailStatus:null,
              goodsDetail:'',
              rulesFlow:'',
              memberList:[],
              memberPage:0,
              isMemberUploading: false,
              isMemberUpfinished: false,
              commentList:[],
              commentPage:0,
              isCommentUploading:false,
              isCommentUpfinished:false,
              count:0, //计时器开始时，给一个全局变量用于减少时间差（以秒为单位，每次增加1）
              timer:null,
              showFree:true
            }
        },
        methods:{
            changeZero(num){
              if(num >= 10){
                return ''+num
              }else{
                return '0'+num
              }
            },
            updategetYMDhms(start,end) {
              // console.log(start,end)
              this.count += 1;//该方法执行几次，count相应++
              var date1 = start;
              var date2 = new Date(end.replace(/-/g, "/"));//将-转化为/，使用new Date
              var s1 = date1.getTime();
              var s2 = date2.getTime();//毫秒为单位
              // console.log(s1,s2)
              if(s1 < s2){
                var total = (s2 - s1) / 1000 - this.count;//每执行一次，减少时间差-1
                var day = parseInt(total / (24 * 60 * 60)); //计算整数天数
                var afterDay = total - day * 24 * 60 * 60; //取得算出天数后剩余的秒数
                var hour = parseInt(afterDay / (60 * 60)); //计算整数小时数
                var afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60; //取得算出小时数后剩余的秒数
                var min = parseInt(afterHour / 60); //计算整数分
                var afterMin = total - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60;
                var seconds = parseInt(afterMin % 60)
                this.$refs.countDown.innerHTML = "距申请结束：<b>"+ this.changeZero(day) +"</b>天<b>"+ this.changeZero(hour) +"</b>小时<b>"+ this.changeZero(min) +"</b>分<b>"+ this.changeZero(seconds) +"</b>秒"
              }else{
                this.$refs.countDown.innerHTML = "已结束"
                this.$refs.countDown.style.color = 'red'
                this.$refs.countDown.style.fontWeight = 'bold'
                clearInterval(this.timer)
              }
            },
            getDetailData(){
              ajax.doAction({
                url: '/lab/'+ this.id,
                type: 'GET',
                successCallback:(data)=>{
                  // console.log(data)
                  let datas = data.data
                  this.detailImg = this.baseUrl.CDNimgUrl + datas.image
                  this.detailTitle = datas.title
                  this.detailPrice = datas.price
                  this.detailNumber = datas.number
                  this.detailTotal = datas.total
                  this.detailStatus = datas.status
                  this.rulesFlow = datas.rule
                  this.goodsDetail = datas.content
                  let currentDate = new Date()
                  let endDate = new Date(datas.result_at.replace(/-/g, "/"))
                  if(currentDate.getTime() > endDate.getTime()){
                    // console.log('第一个大');
                    this.showFree = false
                  } else {
                    this.showFree = true
                    // console.log('第二个大');
                  }

                  this.timer = setInterval(() => {
                    this.updategetYMDhms(currentDate,datas.result_at)
                  },1000)
                },
                errorCallback: (data)=> {
                  console.log('请求失败')
                }
              })
            },
            //申请人员列表
            getMembers(){
              this.memberPage++
              ajax.doAction({
                url: `/lab/${this.id}/members?page=${this.memberPage}`,
                type: 'POST',
                successCallback:(data)=>{
                  // console.log(data)
                  let datas = data.data
                  this.isMemberUploading = false
                  if (datas.length > 0) {
                    this.memberList = this.memberList.concat(datas)
                  } else {
                    this.isMemberUpfinished = true
                  }
                },
                errorCallback: (data)=> {
                  console.log('请求失败')
                }
              })
            },
            onMemberLoad () {
              // console.log('上拉加载'+this.page);
              this.getMembers()
            },
            //评论列表
            getCommentData(){
              this.commentPage++
              ajax.doAction({
                url: `/lab/${this.id}/comments?page=${this.commentPage}`,
                type: 'POST',
                successCallback:(data)=>{
                  // console.log(data);
                  let datas = data.data;
                  this.isCommentUploading = false
                  if (datas.length > 0) {
                    this.commentList = this.commentList.concat(datas)
                  } else {
                    this.isCommentUpfinished = true
                  }
                },
                errorCallback: (data)=> {
                  console.log('请求失败')
                }
              })
          },
            onCommentLoad(){
              this.getCommentData()
            },
        },
        destroyed() {
          clearInterval(this.timer)
        }
    }
</script>

<style>
  .public-survey-detail-wrapper{
    padding-bottom: 55px;
  }
  .public-survey-detail-wrapper .header-image{
    height: 250px;
  }
  .public-survey-detail-wrapper .header-content{
    padding: 20px 0;
  }
  .public-survey-detail-wrapper .header-content h2{
    padding: 0 12px;
  }
  .public-survey-detail-wrapper .header-content p.end-time{
    margin: 10px 12px 15px;
  }
  .public-survey-detail-wrapper .header-content p.end-time b{
    color: red;
  }
  .public-survey-detail-wrapper .head-content-number{
    margin-bottom: 5px;
  }
  .public-survey-detail-wrapper .right-line{
    border-right: 1px solid #ddd;
  }
  .public-survey-detail-wrapper .survey-detail-tab .van-tabs--line .van-tabs__wrap{
    border-top:1px solid #ccc;
    border-bottom: 1px solid #ccc;
    height: 40px;
  }
  .public-survey-detail-wrapper .survey-detail-tab .van-tabs--line .van-tabs__wrap .van-tab{
    line-height: 40px;
  }
  .public-survey-detail-wrapper .survey-detail-tab .van-tabs__content{
    padding: 12px;
    line-height: 18px;
  }
  .public-survey-detail-wrapper .survey-footer{
    position: fixed;
    bottom:0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    z-index: 9999;
    text-align: center;
  }
  .public-survey-detail-wrapper .survey-footer a{
    display: block;
    background: #ef8a26;
    color: #fff;
    font-size: 16px;
  }
  .public-survey-detail-wrapper .survey-detail-tab .name-list{
    margin-bottom: 10px;
  }
  .public-survey-detail-wrapper .survey-detail-tab .user-portrait{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin:0 auto
  }
  .public-survey-detail-wrapper .survey-detail-tab .user-name{
    font-size: 14px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .public-survey-detail-wrapper .report-head-portrait{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 8px;
  }
  .public-survey-detail-wrapper .report-head-name{
    margin: 5px 0;
  }
  .public-survey-detail-wrapper .report-head-name h4{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 5px;
  }
  .public-survey-detail-wrapper .report-head-name p{
    font-size: 11px;
    color: #9999;
  }
  .public-survey-detail-wrapper .report-content-detail{
    line-height: 18px;
    font-size: 13px;
    margin-bottom: 5px;
  }
  .public-survey-detail-wrapper .report-content-image{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
  .public-survey-detail-wrapper .report-content-image li{
    width: 30%;
    border-radius: 5px;
    overflow: hidden;
    height: 70px;
  }
  .public-survey-detail-wrapper .report-content-advantages,.public-survey-detail-wrapper .report-content-shortcomings{
    padding: 10px 0;
    font-size: 13px;
    line-height: 18px;
  }
  .public-survey-detail-wrapper .report-content-advantages b{
    color: #0085ca;
    font-weight: normal;
  }
  .public-survey-detail-wrapper .report-content-shortcomings b{
    color: #ef8a26;
    font-weight: normal;
  }
  .public-survey-detail-wrapper .evaluation-report{
    padding-bottom:10px
  }
</style>
